<template>
	<view>
		<view class="content">
			<view class="content-t">
				<view class="content-t-text">
					<view class="titles">{{reportName}}</view>
					<text class="text">￥{{price}}</text>
				</view>
				<view class="content-t-text-smtit">
					{{describes}}
				</view>
				<view class="ckgd" @click="ckgd()">
					查看更多<image src="../../static/ckgdh.png" mode=""></image>
				</view>
			</view>

			<view class="content-t-c">
				<view class="content-t-text">
					<view class="titles">预留信息</view>
				</view>

				<view class="content-t-c-c">
					
					<view class="content-t-c-c-list">
						<view class="content-t-c-c-list-l">
							联系人
						</view>
						<view class="content-t-c-c-list-r">
							<input v-model="contacts" placeholder='请输入您的姓名'
								placeholder-style="font-size:28rpx;color:#ddd;" />
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;opacity: 0;"></image>
						</view>
					</view>
					<view class="content-t-c-c-list">
						<view class="content-t-c-c-list-l">
							联系电话
						</view>
						<view class="content-t-c-c-list-r">
							<input v-model="contactPhone" maxlength='11' placeholder='请输入您的联系方式' type="number"
								placeholder-style="font-size:28rpx;color:#ddd;" />
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;opacity: 0;"></image>
						</view>
					</view>
					<view class="content-t-c-c-list" @click="clickCar">
						<view class="content-t-c-c-list-l">
							品牌车系
						</view>
						<view class="content-t-c-c-list-r"  id="tjcx">
							<image src="../../static/tjcx.png" mode=""></image>
							<text>添加车系</text>
						</view>
					</view>
					<view class="ppcx" v-for="(item,index) in dxList" :key='index' >
						<view class="Smalltitles">{{item.seriesName}}</view>
						<view class="ppcxRight">
							<image src="../../static/jian.png" mode="" @click="jian(index)"></image>
							<text>{{item.cishu}}</text>
							<image src="../../static/jia.png" mode="" @click="jia(index)"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="content-t-c">
				<view class="content-t-text">
					<view class="titles">到店检测</view>
					<view class="navbar-address" @click="queryCity">
						<view class="navbar-address-text">{{city}}
							<image src="../../static/lbgd.png" mode=""
								style="width: 11.4rpx;height: 20rpx;margin-right: 10rpx;"></image>
						</view>
						<!-- <u-icon style="margin-left: 5rpx;margin-top: 15rpx;" size="20" name="arrow-down"></u-icon> -->
					</view>
				</view>
				<view class="radio">
					<u-radio-group v-model="traderId" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in businessList" :key="index" :name="item.traderId"
							 active-color='#002B56' wrap='true'>
							<view class="namse">{{item.storeAddress}}</view>
						</u-radio>
					</u-radio-group>
				</view>
				<view class="listDetailsAdd">
					<view class="listData">
						<view class="listDataTitles" :id="act==index?'act':''" v-for="(item,index) in listData" @click="delTime(item,index)" :key="index">
							<view>{{item.name}}</view>
							<view>{{item.data}}</view>
						</view>
					</view>
					<view class="xian">
						<view :id="act==0?'act':''"></view>
						<view :id="act==1?'act':''"></view>
						<view :id="act==2?'act':''"></view>
						<view :id="act==3?'act':''"></view>
					</view>
					<view class="listData1">
						<view class="listData1L">
							<view class="listData1LT">上午 09:00-12:00</view>
							<view class="listData1LB">剩余2位</view>
						</view>
						<view class="listData1L">
							<view class="listData1LT">上午 09:00-12:00</view>
							<view class="listData1LB">剩余2位</view>
						</view>
					</view>
				</view>

				

				<view class="content-t-bottom">
					请于约定时间前到达检测中心，具体以工作人员沟通为准。
				</view>
			</view>

			<view class="content-t-b">
				工作时间：09:00-17:00
			</view>

		<!-- 	<view class="content-t-cc" style="padding-top: 32rpx;">
				<u-radio-group v-model="value1" style="width: 100%;">
					<u-radio active-color="#002B56">
						<view class="namse">使用本服务意味着您已经阅读并同意 <navigator url="../jcfwdzht/jcfwdzht"><text
									class="dzht">《检测服务电子合同》</text></navigator>
							<navigator url="../hcjcfwdzht/hcjcfwdzht"><text class="dzht">《豪车检测服务电子合同》</text>
						</view>
						</navigator>
					</u-radio>
				</u-radio-group>
			</view> -->
<view class="content-t-cc" style="padding-top: 32rpx;">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox active-color="#002B56" shape="circle" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list1" :key="index"
					:name="item.name">
					<view class="namse1">使用本服务意味着您已经阅读并同意<span  @click="dzht()" class="dzht">《检测服务电子合同》</span>
						<span class="dzht" @click='dzht1()' >《豪车检测服务电子合同》</span>
					</view>
					</u-checkbox>
			</u-checkbox-group>
</view>
			<view class="bottoms">
				<view class="je">
					<view class="yfk">应付款</view>
					<view class="yfk je1">￥799</view>
				</view>
				<view class="ljxd">
					立即下单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	import API from "@/api/report.js"
	export default {
		data() {
			return {
				
				list1: [{
					name: 'apple',
					checked: false,
					disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '1',
				city:'',
				carModel:'',
				vinNumber:'',
				dxList:[],
				describes:'',
				//获取当前商家信息
				businessList:'',
				//当前时间
				listData: [],
				//当前时间段的人
				numPeople:[],
				// 默认选择的时间段
				act: '',
				actIndex:'0',
				//选择上午或者下午
				amPm:'',
				// 时间段人数
				actList:'',
				//是否需要预约
				isAppointment:0,
				//联系人
				contacts:'',
				//联系电话
				contactPhone:'',
				//车辆检测id
				detectionReportId:'',
				//车商id
				traderId:'',
				//车系id
				seriesId:'',
				reportName:'',
				price:'',
				
			};
		},
		onLoad(option) {
			console.log(option)
			this.price = option.price;
			this.reportName = option.reportName;
			this.describes = option.describes;
			this.detectionReportId = option.detectionReportId;
			this.setData();
		},
		onShow() {
			this.city = getApp().globalData.cityName;
			this.dxList = [];
			this.dxList = getApp().globalData.dxcx;
			console.log(this.dxList)
			// this.assessInfo.brandId = json.brandId
			// this.assessInfo.seriesId = json.seriesId
			// this.assessInfo.modelId = json.modelId
			// this.carModel = json.seriesName
		},
		methods: {
			
			//单个添加
			jia(index){
				this.dxList[index].cishu+=1
				let item = this.dxList[index]
				this.$set(this.dxList,index,item)
				 app.globalData.dxcx = this.dxList;
			},
			jian(index){
				this.dxList[index].cishu-=1;
				let item = this.dxList[index];
				this.$set(this.dxList,index,item);
				if(this.dxList[index].cishu ==0){
					this.dxList.splice(index,1);
				}
				 app.globalData.dxcx = this.dxList;
			},
			dzht(){
				uni.navigateTo({
					url:'/pagesB/jcfwdzht/jcfwdzht'
				})
			},
			dzht1(){
				uni.navigateTo({
					url:'/pagesB/hcjcfwdzht/hcjcfwdzht'
				})
			},
			
			clickCar() {
				app.globalData.xzType = true;
				uni.navigateTo({
					url: "/pagesB/selectCar/carModel"
				})
			},
			queryCity(){
				uni.navigateTo({
					url:'/pagesB/city/city'
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				var index = this.businessList.map(del=>del.traderId).indexOf(e)
				this.listData = this.businessList[index].appointmentTimes;
				this.act = this.businessList[0].appointmentTimes[0].monthDay;
				this.isAppointment =  this.businessList[index].isAppointment;
				this.amPm = ''
				this.traderId = this.businessList[index].traderId;
			},
			delTime(item,index){
				this.act = index
			},
			setData() {
			
			},
			ckgd() {
				uni.navigateTo({
					url: '/pagesB/carService/carService?detectionReportId=' + this.detectionReportId
				});
			}
		}
	}
</script>

<style lang="scss">
	.Smalltitles{
		line-height: 88rpx;
		color: #2C2C2C;
		
	}
	.ppcx{
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		background: #F9F9F9;
		border-bottom: 1rpx solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		.ppcxRight{
			width:140rpx;
			display: flex;
			line-height: 88rpx;
			justify-content: space-between;
		}
		image{
			width: 36rpx;
			height: 36rpx;
			margin-top: 22rpx;
		}
	}
	#tjcx{
		font-size: 28rpx;
		color: #FF552E;
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			margin-top: 26rpx;
		}
	}
	.navbar-address-text{
		min-width: 120rpx;
		display: flex;
		justify-content: space-between;
		image{
			margin-top: 45rpx;
		}
	}
	.listDetailsAdd{
		display: flex;
	}
	#act{
		background: #002B56;
		color: #fff;
	}
	.xian{
		height: 416rpx;
		width: 2rpx;
		background: #F6F6F6;
		margin-left: 32rpx;
		margin-top: 24rpx;
		position: relative;
		view{
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			background: #F6F6F6;
			border-radius: 50%;
		}
	}
	.xian view:nth-child(1){
		top: 40rpx;
		left: -9rpx;
	}
	.xian view:nth-child(2){
		top: 140rpx;
		left: -9rpx;
	}
	.xian view:nth-child(3){
		top: 240rpx;
		left: -9rpx;
	}
	.xian view:nth-child(4){
		top: 340rpx;
		left: -9rpx;
	}
	input {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.content-t-bottom {
		font-size: 24rpx;
		color: #FD7E6E;
		background: #FFF2F1;
		margin-top: 32rpx;
		padding: 12rpx;
	}

	.content-t-text {
		display: flex;
		justify-content: space-between;
		height: 114rpx;
		line-height: 114rpx;
		border-bottom: 1px solid #EFEFEF;
	}

	.titles {
		font-size: 36rpx;
		color: #2C2C2C;
	}

	.text {
		font-size: 36rpx;
		color: #FF552E;
	}

	.content {
		.content-t {
			padding: 0 32rpx;
			// width: 750rpx;
			height: 275rpx;
			background: #fff;

			.content-t-text-smtit {
				font-size: 24rpx;
				color: #333333;
				margin-top: 32rpx;
			}

			.ckgd {
				font-size: 24rpx;
				color: #999999;
				text-align: right;
				margin-top: 32rpx;

				image {
					width: 8rpx;
					height: 12rpx;
					margin-left: 10rpx;
				}
			}
		}

		.content-t-cc {
			padding: 0 32rpx 32rpx;
			// width: 750rpx;

			.namse {
				font-size: 24rpx;
				color: #999999;
				
				
			}
		}
		.namse1{
			// display: flex;
			// flex-wrap: wrap;
			// width: 750rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.content-t-c {
			margin-top: 7rpx;
			padding: 0 32rpx 32rpx;
			// width: 750rpx;
			background: #fff;

			// height: 275rpx;
			.content-t-center {
				display: flex;
				justify-content: space-between;

				view {
					width: 214rpx;
					height: 122rpx;
					border: 2rpx solid #002B56;

					text {
						font-size: 30rpx;
						color: #2C2C2C;
						text-align: center;
						display: block;
						margin-top: 16rpx;
					}

					.money {
						margin-top: 6rpx;
						color: #FF552E;
					}
				}
			}


		}

		.content-t-c-c-list {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #efefef;

			.content-t-c-c-list-l {
				width: 121rpx;
				font-size: 28rpx;
				color: #2C2C2C;
			}

			.content-t-c-c-list-r {
				display: flex;
			}

			image {
				width: 27rpx;
				height: 24.5rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
			}
		}

		.namse {
			font-size: 26rpx;
			color: #2C2C2C;
			height: 80rpx;
			line-height: 80rpx;
		}

		.radio {
			margin-top: 24rpx;
		}
	}

	.listData {
		width: 212rpx;
		margin-top: 24rpx;
		border-radius: 8rpx;
		background: #f6f6f6;
		    overflow: hidden;

		.listDataTitles {
			width: 212rpx;
			height: 104rpx;
			padding-top: 20rpx;
			font-size: 27rpx;
			color: #2C2C2C;
			text-align: center;
		}
	}

	.listData1 {
		margin-left: 46rpx;
		.listData1L {
			width: 376rpx;
			height: 192rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			text-align: center;

			.listData1LT {
				font-size: 28rpx;
				color: #2C2C2C;
				margin-top: 28rpx;
				padding-top: 50rpx;
			}
		}
	}

	.content-t-b {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		height: 89rpx;
		line-height: 89rpx;
		background: #fff;
	}

	.bottoms {
		height: 126rpx;
		background: #fff;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.je {
		width: 320rpx;
		display: flex;

	}

	.yfk {
		padding-top: 36rpx;
	}

	.je1 {
		font-size: 48rpx !important;
		color: #FF552E !important;
		margin-left: 15rpx;
		padding-top: 20rpx !important;
	}

	.yfk {
		font-size: 30rpx;
		color: #2C2C2C;
		text-align: center;
	}

	.ljxd {
		width: 331rpx;
		height: 98rpx;
		background: #002B56;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.dzht {
		color: #FD7E6E;
	}
</style>
